<template>
<div class="frame">
    <div class="top"><input type="checkbox" class="topcheck" v-model="all">全选<span><button>反选</button></span></div>
    <div v-for="(item,index) in list" class="top">
        <input type="checkbox" class="topcheck" v-model="judge[index]">
        <span>{{ item }}</span>
    </div>
</div>
</template>

<script setup>
    import { ref ,computed, reactive} from 'vue';

    // let all=ref(true)
    let list=["艾尔登法环","影逝二度","西部大镖客","塞尔达传说"]
    let judge=ref([false,false,false,false]);
    judge.value[1]=true;
    let all=computed({
        get()
        {
            return judge.value.every((item)=>
                item
            )
        },
        set(val){
            judge.value.forEach((item)=>(item=val));
        }
    })
</script>

<style scoped>
    span{
        margin-left: 200px;
    }
    .topcheck{
        margin-left: 20px;
    }
    .top{
        box-sizing: border-box;
        border-bottom: solid grey 1px;
        display: flex;
        height: 19%;
        /* align-content: center; */
        align-items: center;
        /* background-color: red; */
    }
    .frame{
        margin: auto ;
        margin-top: 50px;
        /* margin: auto ; */
        height: 250px;
        width: 350px;
        background-color: aqua;
    }
</style>